<template>
  <div class="deliver-goods">
    <header>
      <div class="order-box">
        <div class="order-no">订单号：{{ formData.order_no }}</div>
      </div>
      <div class="name">
        <div>
          用户姓名：{{ formData.user_name }}<span class="phone">用户电话：{{ formData.user_tel }}</span>
        </div>
        <div>收货地址：{{ formData.province }} {{ formData.city }} {{ formData.area }} {{ formData.address }}</div>
      </div>
    </header>
    <div class="form-box">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="发货类型" prop="delivery_type">
          <el-radio-group v-model="ruleForm.delivery_type" @input="deliveryTypeChange">
            <el-radio :label="1">发货</el-radio>
            <el-radio :label="2">送货</el-radio>
            <el-radio :label="3">无需发送货</el-radio>
          </el-radio-group>
        </el-form-item>

        <div v-if="ruleForm.delivery_type == 1">
          <el-form-item label="发货模式" prop="delivery_model">
            <el-radio-group v-model="ruleForm.delivery_model">
              <el-radio :label="1">录入单号</el-radio>
              <el-radio :label="2">商家寄件</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="快递公司" prop="delivery_com" v-if="ruleForm.delivery_model == 1">
            <el-select v-model="ruleForm.delivery_com" clearable placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="快递单号" prop="delivery_no" v-if="ruleForm.delivery_model == 1">
            <el-input v-model="ruleForm.delivery_no"></el-input>
          </el-form-item>
        </div>

        <div v-if="ruleForm.delivery_type == 2">
          <el-form-item label="送货人姓名" prop="delivery_of_name">
            <el-input v-model="ruleForm.delivery_of_name"></el-input>
          </el-form-item>
          <el-form-item label="送货人电话" prop="delivery_of_tel">
            <el-input v-model="ruleForm.delivery_of_tel"></el-input>
          </el-form-item>
        </div>

        <div v-if="ruleForm.delivery_model == 2 && ruleForm.delivery_type == 1">
          <el-form-item label="寄件人姓名" prop="shipping_name">
            <el-input v-model="ruleForm.shipping_name"></el-input>
          </el-form-item>
          <el-form-item label="寄件人电话" prop="shipping_tel">
            <el-input v-model="ruleForm.shipping_tel"></el-input>
          </el-form-item>
          <el-form-item label="寄件人地址" prop="shipping_address">
            <el-input v-model="ruleForm.shipping_address"></el-input>
          </el-form-item>
          <el-form-item label="取件日期时间" prop="shipping_date_time">
            <el-date-picker v-model="ruleForm.shipping_date_time" type="datetime" placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="快递公司" prop="shipping_delivery_com">
            <el-select v-model="ruleForm.shipping_delivery_com" clearable placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="电子面单" prop="electronic_waybill">
            <el-input v-model="ruleForm.electronic_waybill"></el-input>
          </el-form-item>
        </div>


        <div v-if="ruleForm.delivery_type == 3">
          <el-form-item label="备注" prop="delivery_textarea">
            <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容"
              v-model="ruleForm.delivery_textarea">
            </el-input>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="def-bt-box">
      <el-button type="primary" @click="submitData" class="bt-fix"> 提交 </el-button>
    </div>
  </div>
</template>

<script>
  export default {
    name: "orderDelivery",
    props: {
      formData: {
        type: Object,
        required: true
      },

    },
    data() {
      const validateDeliveryType = (rule, value, callback) => {

        if (this.ruleForm.delivery_type === 1 && !value) {
          callback(new Error('当发货类型是发货时必须'));
        } else {
          callback();
        }
      };
      const validateDeliveryType2 = (rule, value, callback) => {

        if (this.ruleForm.delivery_type === 2 && !value) {
          callback(new Error('当发货类型是送货时必须'));
        } else {
          callback();
        }
      };
      const validateDeliveryType3 = (rule, value, callback) => {

        if (this.ruleForm.delivery_type === 3 && !value) {
          callback(new Error('无须发货时备注必须'));
        } else {
          callback();
        }
      };
      const validateModel2 = (rule, value, callback) => {

        if (this.ruleForm.delivery_model === 2 && !value) {
          callback(new Error('选择寄件模式时必须'));
        } else {
          callback();
        }
      };
      return {
        pickerVisible: false, // 快递公司选择
        options: [

          {
            value: 'SF',
            label: "顺丰速运"
          }
        ],
        ruleForm: {
          delivery_type: 1, // 发货方式
          delivery_model: 1,
          delivery_delivery_com: 0, //快递公司
          delivery_no: '', //快递单号
          delivery_of_tel: '', //送货人电话
          delivery_of_name: '', //送货人姓名
          shipping_name: '',
          shipping_tel: '',
          shipping_address: '',
          shipping_delivery_com: '',
          electronic_waybill: '',
          shipping_date_time: '',
          delivery_textarea: '',

        },

        rules: {
          delivery_type: [{
              required: true,
              message: '请选择发货类型',
              trigger: 'change'
            },

          ],
          delivery_model: [{
            validator: validateDeliveryType,
            trigger: ''
          }],
          delivery_com: [{
            validator: validateDeliveryType,
            trigger: ''
          }],
          delivery_no: [{
            validator: validateDeliveryType,
            trigger: ''
          }],
          delivery_of_tel: [{
            validator: validateDeliveryType2,
            trigger: ''
          }],
          delivery_of_name: [{
            validator: validateDeliveryType2,
            trigger: ''
          }],
          shipping_name: [{
            validator: validateModel2,
            trigger: ''
          }],
          shipping_tel: [{
            validator: validateModel2,
            trigger: ''
          }],
          shipping_address: [{
            validator: validateModel2,
            trigger: ''
          }],
          shipping_delivery_com: [{
            validator: validateModel2,
            trigger: ''
          }],
          shipping_date_time: [{
            validator: validateModel2,
            trigger: ''
          }],
          delivery_textarea: [{
            validator: validateDeliveryType3,
            trigger: ''
          }],



        }
      };
    },
    mounted() {

      this.getShipingOption()
    },
    methods: {
      submitData() {


        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            let postData = {};
            postData.order_no = this.formData.order_no
            postData.delivery_type = this.ruleForm.delivery_type
            if(this.ruleForm.delivery_type ==1 && this.ruleForm.delivery_model==1){
              postData.delivery_model=1
              postData.shipping_delivery_com = this.ruleForm.delivery_com
              postData.delivery_no=this.ruleForm.delivery_no;
            }
            if(this.ruleForm.delivery_type ==1 && this.ruleForm.delivery_model==2){
              postData.delivery_model=2
              postData.shipping_name = this.ruleForm.shipping_name
              postData.shipping_tel = this.ruleForm.shipping_tel
              postData.shipping_address = this.ruleForm.shipping_address
              postData.shipping_date_time = this.ruleForm.shipping_date_time
              postData.shipping_delivery_com = this.ruleForm.shipping_delivery_com
              postData.electronic_waybill = this.ruleForm.electronic_waybill
            }
            if(this.ruleForm.delivery_type == 2){
              postData.delivery_of_name = this.ruleForm.delivery_of_name
              postData.delivery_of_tel=this.ruleForm.delivery_of_tel;
            }
            if(this.ruleForm.delivery_type == 3){
              postData.delivery_textarea = this.ruleForm.delivery_textarea
            }
            this.$emit('shiping', postData)
          } else {
            return false
          }
        });





      },
      deliveryTypeChange(){
        this.$refs.ruleForm.clearValidate();
      },
      getShipingOption(){
        this.$httpRequest.get('/mailCompany/option').then(result => {
          this.options=result;
        }).catch(e => {
          this.$message.error(e.message)
        });
      }

    },
  };
</script>

<style scoped lang="scss">
  header {
    background-color: #fdf6ec;
    color: #e6a23c;
    padding: 30px;
    box-sizing: border-box;
  }

  .deliver-goods {}

  .form-box {
    padding: 30px;
    box-sizing: border-box;
  }

  .order-no {
    font-size: 18px;
    padding-bottom: 10px;
  }

  .name {
    font-size: 16px;
    line-height: 24px;
  }

  .def-bt-box {
    padding: 30px;
  }

  .phone {
    padding-left: 20px;
  }
</style>
